<template>
	<scroll-view scroll-y style="height: 100vh;">
		<view class="big">
			<view class="smart-panel-head">
				<view class="smart-panel-head-title">城市探索</view>
			</view>

			<view class="kapian">
				<view class="text-one">
					<h4>泉州风光</h4>
				</view>
				<view class="lunbotu" style="padding: 20rpx;">
					<swiper circular indicator-dots :autoplay="true" :interval="5000" :duration="500">
						<swiper-item style="background-color: #808080;">
							<image src="/static/city1.png" mode="widthFix" style="width: 100%;"></image>
						</swiper-item>
						<swiper-item>
							<image src="/static/city2.jpg" mode="widthFix" style="width: 100%;"></image>
						</swiper-item>
						<swiper-item>
							<image src="/static/city3.jpg" mode="widthFix" style="width: 100%;"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="kapian">
				<view class="onetext">
					<rich-text nodes="<h4>泉州介绍</h4>"></rich-text>
				</view>
				<view class="twotext">
					<rich-text nodes="<h5>海上丝绸之路起点：泉州</h5>"></rich-text>
				</view>
				<view class="threetext">
					<rich-text :nodes="richtextnodes"></rich-text>
				</view>
			</view>

			<view class="kapian">
				<view class="onetext">
					<rich-text nodes="<h4>探索进度</h4>"></rich-text>
				</view>
				<text class="progress-text">当前进度: 57.5%</text>
				<view class="jindutiao">
					<progress percent="57.5" activeColor="#007AFF" backgroundColor="#E5E5E5" stroke-width="8"
						show-info />
				</view>
			</view>

			<view class="kapian">
				<view class="onetext">
					<rich-text nodes="<h4>选择城市</h4>"></rich-text>
				</view>
				<view class="picker-view">
					<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
						@change="bindMultiPickerChange" :value="multiIndex" :range="multiArray">
						<view class="picker-display">
							当前选择：{{ multiArray[0][multiIndex[0]] }} - {{ multiArray[1][multiIndex[1]] }} -
							{{ multiArray[2][multiIndex[2]] }}
						</view>
					</picker>
				</view>
			</view>
			<view class="kapian">
				<view class="onetext">
					<rich-text nodes="<h4>泉州调查</h4>"></rich-text>
				</view>
				<view class="shiping">
					<video id="myVideo" src="/static/city-video.mp4" @error="videoErrorCallback" controls>
					</video>
				</view>
			</view>
			<view class="kapian">
				<view class="onetext">
					<rich-text nodes="<h4>泉州背景音乐</h4>"></rich-text>
				</view>
				<view class="music">
				</view>
			</view>
			<view class="kapian">
				<view class="onetext">
					<rich-text nodes="<h4>偏好设置</h4>"></rich-text>
				</view>
				<view class="item">
					<view class="label">出行方式：</view>
					<radio-group @change="handleTravelModeChange">
						<label class="radio-item">
							<radio :value=" 'bus' " :checked="travelMode === 'bus' " />公交
						</label>
						<label class="radio-item">
							<radio :value=" 'selfDriving' " :checked="travelMode === 'selfDriving' " />自驾
						</label>
						<label class="radio-item">
							<radio :value=" 'walk' " :checked="travelMode === 'walk' " />步行
						</label>
					</radio-group>
				</view>

				<view class="item">
					<view class="label">显示推荐景点：</view>
					<switch :checked="showRecommendSpots" @change="handleShowSpotsChange" />
				</view>

				<view class="item">
					<view class="label">探索半径（km）：</view>
					<slider :value="exploreRadius" @change="handleRadiusChange" />
					<view class="radius-value">{{ exploreRadius }}km</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				richtextnodes: `
        <div style="font-size: 14px; line-height: 1.8; margin-bottom: 12px;">
          <span style="font-weight: bold;">历史文化：</span>
          <span style="color: #888888;">
            泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。
          </span>
        </div>
        <div style="font-size: 14px; line-height: 1.8; margin-bottom: 12px;">
          <span style="font-weight: bold;">著名景点：</span>
          <span style="color: #888888;">
            清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。
          </span>
        </div>
        <div style="font-size: 14px; line-height: 1.8;">
          <span style="font-weight: bold;">特色文化：</span>
          <span style="color: #888888;">拥有</span>
          <a style="color: #007AFF; text-decoration: none;">南音、木偶戏</a>
          <span style="color: #888888;">和</span>
          <a style="color: #007AFF; text-decoration: none;">闽南建筑</a>
          <span style="color: #888888;">等丰富的非物质文化遗产。</span>
        </div>`,

				multiArray: [
					['福建省', '广东省', '浙江省', '江苏省'],
					['泉州市', '福州市', '厦门市', '莆田市'],
					['丰泽区', '鲤城区', '洛江区', '泉港区']
				],
				multiIndex: [0, 0, 0],

				cityData: {
					'福建省': ['泉州市', '福州市', '厦门市', '莆田市'],
					'广东省': ['广州市', '深圳市', '佛山市', '东莞市'],
					'浙江省': ['杭州市', '宁波市', '温州市', '绍兴市'],
					'江苏省': ['南京市', '苏州市', '无锡市', '常州市'],

					'福建省-泉州市': ['丰泽区', '鲤城区', '洛江区', '泉港区', '晋江市', '石狮市'],
					'福建省-福州市': ['鼓楼区', '台江区', '仓山区', '晋安区', '马尾区'],
					'福建省-厦门市': ['思明区', '湖里区', '集美区', '海沧区'],
					'福建省-莆田市': ['荔城区', '城厢区', '涵江区', '秀屿区'],


					'广东省-广州市': ['天河区', '越秀区', '海珠区', '荔湾区', '白云区'],
					'广东省-深圳市': ['福田区', '罗湖区', '南山区', '宝安区', '龙岗区'],
					'广东省-佛山市': ['禅城区', '南海区', '顺德区', '三水区'],
					'广东省-东莞市': ['莞城街道', '南城街道', '东城街道', '万江街道'],


					'浙江省-杭州市': ['上城区', '拱墅区', '西湖区', '滨江区', '萧山区'],
					'浙江省-宁波市': ['海曙区', '江北区', '北仑区', '镇海区', '鄞州区'],
					'浙江省-温州市': ['鹿城区', '龙湾区', '瓯海区', '洞头区'],
					'浙江省-绍兴市': ['越城区', '柯桥区', '上虞区'],


					'江苏省-南京市': ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
					'江苏省-苏州市': ['姑苏区', '虎丘区', '吴中区', '相城区', '吴江区'],
					'江苏省-无锡市': ['梁溪区', '锡山区', '惠山区', '滨湖区'],
					'江苏省-常州市': ['天宁区', '钟楼区', '新北区', '武进区']
				},
				travelMode: 'bus', 
				showRecommendSpots: true, 
				exploreRadius: 10, 
				videoContext: null
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		methods: {
			bindMultiPickerColumnChange(e) {
				this.multiIndex[e.detail.column] = e.detail.value;
				const column = e.detail.column;
				const value = e.detail.value;

				if (column === 0) {
					const province = this.multiArray[0][value];
					this.multiArray[1] = this.cityData[province] || [];
					this.multiIndex[1] = 0;
					this.multiIndex[2] = 0;

					if (this.multiArray[1].length > 0) {
						const city = this.multiArray[1][0];
						const key = `${province}-${city}`;
						this.multiArray[2] = this.cityData[key] || [];
					} else {
						this.multiArray[2] = [];
					}
				} else if (column === 1) {
					const province = this.multiArray[0][this.multiIndex[0]];
					const city = this.multiArray[1][value];
					const key = `${province}-${city}`;
					this.multiArray[2] = this.cityData[key] || [];
					this.multiIndex[2] = 0;
				}
				this.$forceUpdate();
			},
			bindMultiPickerChange(e) {
				console.log('选择的结果索引：', e.detail.value);
				console.log('选择的结果：',
					this.multiArray[0][e.detail.value[0]],
					this.multiArray[1][e.detail.value[1]],
					this.multiArray[2][e.detail.value[2]]
				);
			},
			videoErrorCallback(e) {
				console.error('视频播放错误', e);
			},

			handleTravelModeChange(e) {
				this.travelMode = e.detail.value;
				console.log('选择的出行方式：', this.travelMode);
			},

			handleShowSpotsChange(e) {
				this.showRecommendSpots = e.detail.value;
				console.log('是否显示推荐景点：', this.showRecommendSpots);
			},

			handleRadiusChange(e) {
				this.exploreRadius = e.detail.value;
				console.log('探索半径：', this.exploreRadius + 'km');
			}
		}
	};
</script>

<style>
	.big {
		width: 100%;
		flex-direction: column;
		display: flex;
		background-color: #e8e8e8;
	}

	.kapian {
		width: 86%;
		background-color: white;
		flex-direction: column;
		display: flex;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.lunbotu {
		border-radius: 20rpx;
		overflow: hidden;
	}

	.onetext {
		padding: 10rpx 0;
		margin-bottom: 10rpx;
		text-align: left;
	}

	image {
		width: 100%;
		height: 300rpx;
		object-fit: cover;
	}

	.twotext {
		text-align: center;
		padding: 10rpx 0;
		margin-bottom: 10rpx;
	}

	.threetext {
		width: 100%;
		padding-bottom: 10rpx;
		text-align: left;
	}

	.progress-text {
		font-size: 14px;
		color: #888888;
		margin-bottom: 12px;
		display: block;
		text-align: left;
		padding-left: 5%;
	}

	.jindutiao {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 20rpx;
	}

	.picker-view {
		padding: 20rpx;
	}

	.picker-display {
		padding: 15rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		text-align: left;
		color: #333;
		font-size: 28rpx;
	}

	video {
		width: 100%;
		height: 700rpx;
		margin: 0 auto;
	}

	.preference-container {
		padding: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.label {
		width: 180rpx;
		font-size: 28rpx;
	}

	.radio-item {
		margin-right: 40rpx;
		font-size: 28rpx;
	}

	.radius-value {
		margin-left: 20rpx;
		font-size: 28rpx;
	}
</style>